<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="forget.png" type="image/x-icon" />
    <title>修改密码</title>
    <script type="text/javascript" src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <style>
        .error{
            color:red;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 使用flex布局，让内容垂直和水平居中 */

        section {
            /* 相对定位 */
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
            background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
        }

        /* 背景颜色 */

        section .color {
            /* 绝对定位 */
            position: absolute;
            /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
            filter: blur(200px);
        }

        /* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

        section .color:nth-child(1) {
            top: -350px;
            width: 600px;
            height: 600px;
            background: #ff359b;
        }

        section .color:nth-child(2) {
            bottom: -150px;
            left: 100px;
            width: 500px;
            height: 500px;
            background: #fffd87;
        }

        section .color:nth-child(3) {
            bottom: 50px;
            right: 100px;
            width: 500px;
            height: 500px;
            background: #00d2ff;
        }

        .box {
            position: relative;
            border-radius: 10px;
        }

        /* 背景圆样式 */

        .box .circle {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
            backdrop-filter: blur(5px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            /* 使用filter(滤镜) 属性，改变颜色。
            hue-rotate(deg)  给图像应用色相旋转
            calc() 函数用于动态计算长度值
            var() 函数调用自定义的CSS属性值x*/
            filter: hue-rotate(calc(var(--x) * 70deg));
            /* 调用动画animate，需要10s完成动画，
            linear表示动画从头到尾的速度是相同的，
            infinite指定动画应该循环播放无限次*/
            animation: animate 10s linear infinite;
            /* 动态计算动画延迟几秒播放 */
            animation-delay: calc(var(--x) * -1s);
        }

        /* 背景圆动画 */

        @keyframes animate {
            0%, 100%, {
                transform: translateY(-50px);
            }
            50% {
                transform: translateY(50px);
            }
        }

        .box .circle:nth-child(1) {
            top: -50px;
            right: -60px;
            width: 100px;
            height: 100px;
        }

        .box .circle:nth-child(2) {
            top: 150px;
            left: -100px;
            width: 120px;
            height: 120px;
            z-index: 2;
        }

        .box .circle:nth-child(3) {
            bottom: 50px;
            right: -60px;
            width: 80px;
            height: 80px;
            z-index: 2;
        }

        .box .circle:nth-child(4) {
            bottom: -80px;
            left: 100px;
            width: 60px;
            height: 60px;
        }

        .box .circle:nth-child(5) {
            top: -80px;
            left: 140px;
            width: 60px;
            height: 60px;
        }

        /* 登录框样式 */

        .container {
            position: relative;
            width: 400px;
            min-height: 400px;
            background: rgba(255, 255, 255, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .form {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 50px;
        }
        .checkip {
            position: absolute;
            left:0px;
            bottom:-10px;
            width: 100%;
            height: 6%;
        }

        /* 登录标题样式 */

        .form h2 {
            position: relative;
            color: #00aaff;
            font-size: 24px;
            font-weight: 600;
            letter-spacing: 5px;
            margin-bottom: 30px;
            cursor: pointer;
        }

        /* 登录标题的下划线样式 */

        .form h2::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 0px;
            height: 3px;
            background: #fff;
            transition: 0.5s;
        }

        .form h2:hover:before {
            width: 53px;
        }

        .form .inputBox {
            width: 100%;
            margin-top: 20px;
        }

        .checkip .inputText {
            width: 100%;
            height:100%;
            margin-top: 20px;
        }

        /* 输入框样式 */

        .form .inputBox input {
            width: 100%;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.2);
            outline: none;
            border: none;
            border-radius: 30px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 16px;
            letter-spacing: 1px;
            color: #666;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }


        /* 下面的ip */
        .checkip .inputText input {
            position: absolute;
            width:55%;
            right:20%;
            bottom:50%;
            background: rgba(255, 255, 255, 0);
            outline: none;
            border: 1px solid rgba(255, 255, 255, 0);
            font-size: 14px;
            letter-spacing: 1px;
            color: #00aaff

        }

        .form .inputBox input::placeholder {
            color: #666;
        }

        /* 登录按钮样式 */

        .form .inputBox input[type="submit"] {
            background: #fff;
            color: #666;
            max-width: 100px;
            margin-bottom: 20px;
            font-weight: 600;
            cursor: pointer;
        }


        .forget {
            margin-top: 6px;
            color: #236;
            letter-spacing: 1px;
        }
        .goto {
            position: absolute;
            right:3%;
            bottom:50%;
            margin-top: 6px;
            color: #236;
            letter-spacing: 1px;
        }

        .goto a {
            font:12px;
            color: #aaaa00;
            font-weight: 600;
            text-decoration: none;
        }

        .forget a {
            color: #236;
            font-weight: 600;
            text-decoration: none;
        }
    </style>

</head>

<body>
<section>
    <!-- 背景颜色 -->
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <!-- 背景圆 -->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <!-- 登录框 -->
        <div class="container">
            <div class="form">
                <h2>修改密码</h2>
                <form id = "forgetform" action="" method="post" name = "form">
                    <div class="inputBox">
                        <input type="text" placeholder="用户名" name="username" id="username">
                    </div>
                    <div class="inputBox">
                        <input type="text" placeholder="原始密码" name="primitivePwd" id="primitivePwd">
                    </div>
                    <div class="inputBox">
                        <input type="password" placeholder="请输入密码" name="password" id="password">
                        <span id="msg"></span>
                    </div>
                    <div class="inputBox">
                        <input type="password" placeholder="再次输入密码" name="repassword" id="repassword">
                    </div>
                    <div class="inputBox">
                        <div id="code" style="margin-left: 3%;font-family:Arial;font-weight:bold; border:0;letter-spacing:2px;color:blue; "></div>
                    </div>
                    <div class="inputBox">
                        <input type="text" placeholder="请输入验证码" name="verify" id="verify">
                    </div>
                    <div class="inputBox">
                        <input type="button" id="updatePwdForm" value="修改">
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
</body>

</html>
<script>

    //验证码
    var codeStr = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    var oDiv = document.getElementById('code');

    // 用来生成随机整数
    function getRandom(n, m) { // param: (Number, Number)
        n = Number(n);
        m = Number(m);
        // 确保 m 始终大于 n
        if (n > m) {
            var temp = n;
            n = m;
            m = temp;
        }
        return Math.floor(Math.random() * (m - n) + n);
    }

    // 将随机生成的整数下标对应的字母放入div中
    function getCode() {
        var str = '';
        // 验证码有几位就循环几次
        for (var i = 0; i < 4; i++) {
            var ran = getRandom(0, 62);
            str += codeStr.charAt(ran);
        }
        oDiv.innerHTML = str;
    }

    getCode();// 调用函数，页面刷新也会刷新验证码
    // 点击刷新验证码
    oDiv.onclick = function () {
        getCode();
    }


    $("#updatePwdForm").click(function (event) {
        //先判断验证码对不对
        var vsCode=document.getElementById("verify").value;
        var oDiv = document.getElementById('code').innerHTML;
        if(vsCode!=oDiv){
            alert("验证码错误");
            return false;
        }
        var password=$("#password").val();
        var repassword=$("#repassword").val();
        if(password!=repassword){
            alert("两次密码不一致");
            return false;
        }
        var primitivePwd=$("#primitivePwd").val();
        var newPwd=$("#password").val();
        if(primitivePwd==newPwd){
            alert("新旧密码两次密码不可以一致");
            return false;
        }
        //获取值
        var username=$("#username").val();


        $.ajax({
            type: "POST",
            url: "../gqgl/login/checkPwd",
            data: {
                "username": username,
                "password": primitivePwd,
                "newpassword": newPwd
            },
            dataType: "JSON",
            success: function (data) {
                //alert(data.msg);
                window.location.href="../gqgl/login/login";
            },
            error: function(msg){
                alert(data.msg);
            }
        });
    });


    $("#password").blur(function() {

        var level=checkPwdLevel($("#password").val());
        if(level==0){
            $("#msg").html("简单");
        }else if(level==1){
            $("#msg").html("容易");
        }else if(level==2){
            $("#msg").html("一般");
        }else if(level==3){
            $("#msg").html("中等");
        }else if(level==4){
            $("#msg").html("复杂");
        }

    });
    function checkPwdLevel(password) {
        if (password.length < 6) {
            return 0;
        }
        var ls = 0;
        if (password.match(/([a-z])+/)) {
            ls++;
        }
        if (password.match(/([0-9])+/)) {
            ls++;
        }
        if (password.match(/([A-Z])+/)) {
            ls++;
        }
        if (password.match(/[^a-zA-Z0-9]+/)) {
            ls++;
        }
        return ls
    }


</script>